<template>
  <div class="app-container">
    <div class="right">
      <div class="filter-container filter">
        <Select 
          v-model="selectBrand" 
          clearable 
          filterable 
          style="margin-right:4px;"
          placeholder="品牌筛选">
          <Option 
            v-for="item in brandList" 
            :key="item.brandId" 
            :value="item.brandId"
            >{{item.brandName}}
          </Option>
        </Select>
        <DatePicker 
          v-model="DataTime" 
          type="month" 
          placeholder="月份筛选"
        ></DatePicker>
      </div>
      <div v-if="costList.length" class="filter-container" style="min-height:150px;">
        <Tag 
          color="red" 
          :class="{active: item.isActive}" 
          v-for="item in costList"
          :key="item.id"
          @click.native="handlerTag(item)"
        >{{item.costCenterName}}</Tag>
      </div>
      <div v-else class="filter-container" style="line-height: 150px;min-height:150px;text-align: center;">
        <h3>暂无数据</h3>
      </div>


      <div class="filter-container">
        <p class="title">渠道占比<span class="unit">（单位：%）</span></p>
        <PIE
          :initData="score"
        ></PIE>
      </div>
    </div>
    <div class="left">
      <div class="filter-container">
        <p class="title">物料<span class="unit">（单位：个）</span></p>
        <BAR
          id="bar1"
          :initData="brandMaterial"
        ></BAR>
      </div>
      <div class="filter-container">
        <p class="title">分值<span class="unit">（单位：分）</span></p>
        <BAR
          id="bar2"
          :initData="stylistRatio"
        ></BAR>
      </div>
    </div>
  </div>
</template>

<script>
import PIE from './components/pie.vue'
import BAR from './components/bar.vue'
import { getAllBrand, getbrandCostcenter, getmatAndUserScore } from '@/api/intraClass'
import format from "date-format";
export default {
  data() {
    return {
      selectBrand: '',
      DataTime: new Date(),
      // 品牌列表
      brandList: [],
      // 成本中心
      costList: [],
      // 饼图数据
      score: [],
      // 品牌物料占比
      brandMaterial: [],
      // 设计师占比
      stylistRatio: []
    }
  },
  components: {
    PIE,
    BAR
  },
  mounted() {
    this.initData()
  },
  methods: {
    async initData() {
      try {
        const { data = []} = await getAllBrand()
        this.brandList = data
      } catch(err) {
        return err
      }
    },
    // 获取成本中心列表、饼图数据
    async selectChange() {
      const Mount = new Date(this.DataTime || '').getMonth()
      const Year = new Date(this.DataTime || '').getFullYear()
      try {
        const { data = {}} = await getbrandCostcenter({
          brandId: this.selectBrand,
          startTime: format("yyyy-MM-dd", new Date(Year, Mount, 1)),
          endTime: format("yyyy-MM-dd", new Date(Year, Mount + 1, 0)),
        })
        this.score = data.score
        this.costList = data.CostCenters.map(item => {
          return {
            isActive: false,
            ...item
          }
        })
      } catch(err) {
        return err
      }
    },
    async handlerTag(brandInfo) {
      this.costList.forEach(item => {
        item.isActive = false
      })
      const index = this.costList.findIndex(item => item.costCenterName === brandInfo.costCenterName)
      this.costList[index].isActive = true
      const Mount = new Date(this.DataTime || '').getMonth()
      const Year = new Date(this.DataTime || '').getFullYear()
      const startTime = format("yyyy-MM-dd", new Date(Year, Mount, 1))
      const endTime = format("yyyy-MM-dd", new Date(Year, Mount + 1, 0))
      try {
        const { data ={}} = await getmatAndUserScore(this.selectBrand, brandInfo.id, startTime, endTime)
        this.brandMaterial = data.materials
        this.stylistRatio = data.userScoreList.map(item => {
          return {
            name: item.name,
            count: item.userBrandScoreCount
          }
        })
      } catch(err) {
        return err
      }
    }
  },
  computed: {
    requestData() {
      let {selectBrand, DataTime} = this
      return {selectBrand, DataTime}
    }
  },
  watch: {
    requestData: {
      handler(data) {
        const list = Object.values(data)
        const result = list.every(item => item)
        if(result) {
          this.selectChange()
        }
      },
      deep: true,
    }
  }
}
</script>

<style lang="less" scoped>
.app-container {
  display: flex;
  .right {
    width: 34%;
    height: 100%;
    margin-right: 10px;
    .filter {
      display: flex;
      /deep/ .ivu-input-with-suffix {
        flex: 1;
        border-radius: 20px;
        // padding-left: 16px;
        width: 125px;
        margin: 0 4px;
      }
    }
  }
  .left {
    width: 66%;
    height: 100%;
  }
  .title {
    font-size: 14px;
    color: #000;
    .unit {
      color: #999;
    }
  }
}
.active {
  background-color: #b1b6cf !important;
}
.filter-container {
  border-radius: 8px;
  margin-bottom: 10px;
  background-color: #fff;
  padding: 20px;
}
/deep/ .ivu-select-single .ivu-select-selection {
  border-radius: 18px;
  flex:1;
  padding: 0 24px 0 16px;
}
/deep/ .ivu-select-single .ivu-select-input::-webkit-input-placeholder{
  color: #2e3773;
}
/deep/ .ivu-tag-red {
  border-color: #b9b9b9;
  background-color: #fff;
  border-radius: 10px;
}
/deep/ .ivu-tag-red .ivu-tag-text {
  color: #2e3773 !important;
}
</style>